<!DOCTYPE html>
<html lang="zh">

<head>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="keywords" />
    <meta name="description" />
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/aos.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="home">


        <div class="header  animated fadeIn">
            <div class="box">
                <div class="l">
                    <a href="./index.html" class="logo">
                        <img src="./images/logo.svg" alt="">
                    </a>
                    <div class="links">
                        <a href="./products.html">Catalogue</a>
                        <a href="./creative.html">Creative</a>
                        <a href="./about.html">About</a>
                        <a href="./contact.html">Contact</a>
                    </div>
                </div>
                <div class="r">
                    <a href="">CN/EN</a>
                </div>
            </div>
        </div>

        <div class="pheader">
            <div class="menu">
                <a href="./index.html" target="_self" class="animated fadeInUpLeft">
                    <img src="./images/logo.svg" alt="">
                </a>
                <div class="navbox">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <div class="menuList">
            <div class="item">
                <div class="tb">
                    <a href="./products.html">Catalogue</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./creative.html">Creative</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./about.html">About</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="./contact.html">Contact</a>
                </div>
            </div>
        </div>


        <div class="section1"  style="justify-content: space-between;">
            <div class="l">
                <div class="title animated fadeInUp">
                    yunbang<br>
                    cospack
                </div>
                <div class="pick animated fadeInUp" style="animation-delay: .2s">
                    <p>
                        Innovation is our stive, Yunbang company adhering to the high quality, customer demand as the
                        first goal, follow the new direction of the market.
                    </p>
                    <p>&nbsp;</p>
                    <p>
                        Honest trading, Efficient work.
                    </p>
                </div>
                <div class="btn">
                    <a href="" class="common_button animated fadeInUp" style="animation-delay: .4s">
                        <span class="dot"></span>
                        <span class="text">START NOW</span>
                    </a>
                </div>
            </div>
            <div class="r" style="width: 788px;height: 1048px;">
                <img src="./images/img.png" alt="" style="display: none;">
                <canvas width="788" height="1048"></canvas>
            </div>
        </div>

        <div class="section2">
            <img src="./images/hh.png" class="bg1" aos="fade-right" alt="">
            <div class="end">
                <div class="title">
                    <h1 aos="fade-up">Product</h1>
                    <a href="products.html" class="common_button" aos="fade-up" aos-delay="200">
                        <span class="dot"></span>
                        <span class="text">START NOW</span>
                    </a>
                </div>
            </div>
            <div class="content" aos="fade-up" aos-delay="200">
                <div class="block"></div>
                <div class="swiper1 swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="products.html" class="img" data-swiper-parallax-scale="0.65">
                                <img src="./images/al2.png" alt="">
                            </a>
                            <a class="text" href="./products.html">sprayer pump</a>
                        </div>
                        <div class="swiper-slide">
                            <a href="products.html" class="img" data-swiper-parallax-scale="0.65">
                                <img src="./images/al2.png" alt="">
                            </a>
                            <a class="text" href="./products.html">lotion pump</a>
                        </div>
                        <div class="swiper-slide">
                            <a href="products.html" class="img" data-swiper-parallax-scale="0.65">
                                <img src="./images/al2.png" alt="">
                            </a>
                            <a class="text" href="./products.html">glass bottle series</a>
                        </div>
                    </div>
                </div>
                <div class="button">
                    <img src="./images/prev.png" alt="">
                    <img src="./images/next.png" alt="">
                </div>
            </div>
        </div>

        <div class="section3">
            <img src="./images/bg1.png" class="bg1" alt="">
            <img src="./images/bg12.png" class="bg2" alt="">
            <div class="title">
                <h1 aos="fade-up">Creative Products</h1>
                <div class="btn" aos="fade-up" aos-delay="200">
                    <a href="./creative.html" class="common_button animated fadeInUp" style="animation-delay: .4s">
                        <span class="dot"></span>
                        <span class="text">VIEW ALL</span>
                    </a>
                </div>

            </div>
            <div class="content">
                <a href="proInfo.html" class="item" aos="fade-up" aos-delay="100">
                    <div class="img">
                        <img src="./images/g1.png" alt="">
                    </div>
                    <div class="text">YB009-A</div>
                </a>
                <a href="proInfo.html" class="item" aos="fade-up" aos-delay="200">
                    <div class="img">
                        <img src="./images/g2.png" alt="">
                    </div>
                    <div class="text">YB009-B</div>
                </a>
                <a href="proInfo.html" class="item" aos="fade-up" aos-delay="300">
                    <div class="img">
                        <img src="./images/g3.png" alt="">
                    </div>
                    <div class="text">YB015</div>
                </a>
                <a href="proInfo.html" class="item" aos="fade-up" aos-delay="400">
                    <div class="img">
                        <img src="./images/g4.png" alt="">
                    </div>
                    <div class="text">YB030</div>
                </a>
                <a href="proInfo.html" class="item" aos="fade-up" aos-delay="500">
                    <div class="img">
                        <img src="./images/g5.png" alt="">
                    </div>
                    <div class="text">YB019</div>
                </a>
                <a href="proInfo.html" class="item" aos="fade-up" aos-delay="600">
                    <div class="img">
                        <img src="./images/g6.png" alt="">
                    </div>
                    <div class="text">YB028</div>
                </a>
                <a href="proInfo.html" class="item" aos="fade-up" aos-delay="700">
                    <div class="img">
                        <img src="./images/g7.png" alt="">
                    </div>
                    <div class="text">YB029</div>
                </a>
                <a href="proInfo.html" class="item" aos="fade-up" aos-delay="800">
                    <div class="img">
                        <img src="./images/g8.png" alt="">
                    </div>
                    <div class="text">YB016</div>
                </a>
            </div>
            <div class="content2">
                <h1 aos="fade-up">Your Creative Products</h1>
                <div class="text" aos="fade-up" aos-delay="100">
                    Yunbang products are designed by designers with innovative color matching according to the bottle
                    shape. Our design team can provide effect pictures and optional design schemes according to the
                    needs of customers. After presenting the effect pictures, our designers will produce physical
                    objects as close to the effect pictures as possible according to the Pantone color card for
                    customers' reference. Our design team will also explore new cosmetic packaging design according to
                    market trends. Let's look forward together...
                </div>
            </div>
        </div>

        <div class="section4">
            <img src="./images/map.png" class="map" alt="">
            <img src="./images/map2.svg" class="map2" alt="">
            <div class="l">
                <div class="title" aos="fade-up">
                    About<br>
                    Yunbang
                </div>
                <div class="pick" aos="fade-up">
                    Our company is Ningbo Yunbang Commodities Technology Company was established in 2000, located in
                    Yuyao, Zhejiang, China. The company from mold design, new products development, injection machine,
                    blowing machine, how stamping, silk screen printing, UV, and production test all in one stop
                    service. Our company seriously implement ISO 9001 quality management system, provide high quality
                    products to our customers.
                </div>
                <a href="about.html" class="common_button" aos="fade-up" aos-delay="100">
                    <span class="dot"></span>
                    <span class="text">View More</span>
                </a>
            </div>
            <div class="r">
                <div class="figure">
                    <div class="item" aos="fade-up">
                        <span class="count-item" data-to="30000">30000</span>
                        <p>Factory area</p>
                    </div>
                    <div class="item" aos="fade-up" aos-delay="100">
                        <span class="count-item" data-to="82">82</span>
                        <p>Injection molding machine</p>
                    </div>
                    <div class="item" aos="fade-up">
                        <span class="count-item" data-to="46">46</span>
                        <p>Automatic Assembly <br> and testing machine</p>
                    </div>
                    <div class="item" aos="fade-up" aos-delay="100">
                        <span class="count-item" data-to="200">200</span>
                        <p>employees</p>
                    </div>
                </div>
                <div class="images">
                    <div class="img" aos="fade-up" aos-delay="100">
                        <img src="./images/es1.png" alt="">
                    </div>
                    <div class="img" aos="fade-up" aos-delay="200">
                        <img src="./images/es2.png" alt="">
                    </div>
                    <div class="img" aos="fade-up" aos-delay="300">
                        <img src="./images/es3.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="section5">
            <div class="l">
                <div class="title" aos="fade-up">Contact Us</div>
                <div class="pick" aos="fade-up" aos-delay="100">
                    We have cooperated with a number of domestic first一line brands for many years, has been an excellent
                    supplier of cooperation, our products have been sold to China, Italy, Japan, South Korea, the United
                    States, Russia and other parts of the world, if you have any price inquiry, questions of customized
                    service welcome to contact us at any time.
                </div>
                <a href="contact.html" class="common_button" aos="fade-up" aos-delay="200">
                    <span class="dot"></span>
                    <span class="text">Contact now</span>
                </a>
            </div>
            <div class="r" aos="fade-up" aos-delay="300">
                <div class="swiper3 swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./images/de1.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/de2.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/de3.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/de4.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/de5.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/de6.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="foot">
            <div class="dom1">
                <div class="item">
                    <p class="p1">Products</p>
                    <div class="aList">
                        <a href="">airless bottle series</a>
                        <a href="">lotion pump</a>
                        <a href="">Airless pump</a>
                        <a href="">sprayer pump</a>
                        <a href="">dropper</a>
                        <a href="">cream Jar series</a>
                        <a href="">Glass bottle series</a>
                    </div>
                </div>
                <div class="item">
                    <p class="p1">Creative Product</p>
                    <div class="aList">
                        <a href="">Surface treatment process</a>
                        <a href="">Product color matching</a>
                        <a href="">Design concept</a>
                    </div>
                </div>
                <div class="item">
                    <p class="p1">About Us</p>
                    <div class="aList">
                        <a href="">Profile</a>
                        <a href="">Culture</a>
                        <a href="">Workspace</a>
                        <a href="">Exhibition</a>
                    </div>
                </div>
                <div class="r">
                    <p class="p1">Contact</p>
                    <div class="des">
                        <p>Wechat/WhatsApp: +86 13486448648</p>
                        <p>Emali: 605109526@qq.com hz970207@gmail.com </p>
                        <p>Alibaba: https://yunbangryp.en.alibaba.com</p>
                    </div>
                    <div class="form">
                        <input type="text" placeholder="Enter Your Email">
                        <a href="">Subsribe</a>
                    </div>
                    <div class="icons">
                        <a href="https://www.facebook .com/profile.php?id=100062550642717&mibextid=LQQJ4d"
                            target="_blank">
                            <img src="./images/f1.svg" alt="">
                        </a>
                        <a href="http://linkedin.com/in/noah-zhang-aba832204" target="_blank">
                            <img src="./images/f2.svg" alt="">
                        </a>
                        <a href="https://x.com/Noah_Hao7" target="_blank">
                            <img src="./images/f3.svg" alt="">
                        </a>
                        <a href="https://www.instagram.com/noah_hao?igsh=eWNreTdrZ3phag%3D%3D&utm_source=qr"
                            target="_blank">
                            <img src="./images/f4.svg" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="dom2">
                <div class="l">
                    COPYRIGHT O 2024 LIGHTSPACE INTERNATIONAL AG.
                </div>
                <div class="r">
                    <a href="">Terms and Conditions Privocy Policy</a>
                </div>
            </div>
        </div>

    </div>
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/gsap.min.js"></script>
    <script src="./js/ScrollTrigger.min.js"></script>
    <script src="./js/aos.js"></script>
    <script src="./js/lenis.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/countUp.js"></script>
    <script>
        const lenis = new Lenis()
        lenis.on('scroll', (e) => {
            scrollTop = e.animatedScroll

        })
        function raf(time) {
            lenis.raf(time)
            requestAnimationFrame(raf)
        }
        requestAnimationFrame(raf)

        function padWithZeros(number, length) {
        return String(number).padStart(length, '0');
    }
     let url = 'https://bryhel.com/wp-content/webp-express/webp-images/themes/bryhel/img/bottles/desktop/'
    // canvas
    let canvas = document.querySelector('canvas');
    console.log(canvas)
    let ctx = canvas.getContext('2d');
    var frameCount = 240
    var images = []
    for (let i= 0;i<=frameCount;i++){
        let img = new Image();
      img.src = url+padWithZeros(i, 3)+'.jpg.webp'
        images.push(img)
    }
    images[0].onload = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.drawImage(images[0], 0, 0,canvas.width,canvas.height)
    }
    var flag = true
    var index = 0
    function updateBottles(index) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(images[index - 1], 0, 0,canvas.width,canvas.height);
    }
    var timeline = gsap.timeline({
        repeat:-1,
        yoyo:true,
        paused:true
    })
    var animation = {
        value: 1,
        from: 1,
        to: 241
    };
    timeline.fromTo(animation,{
        value:animation.from
    },{
        value:animation.to,
        duration:6,
        onUpdate:function(){
            updateBottles(Math.ceil(animation.value))
        }
    })
    timeline.play()

        gsap.registerPlugin(ScrollTrigger);
        ScrollTrigger.create({
            trigger: '#bottle',
            start: 'top top',
            end: '170% top',
            // markers: true,
            scrub: true,
            onUpdate: function onUpdate(self) {
                // const increment = Math.max(1, Math.abs(self.getVelocity() / 200));
                var _increment = 1 + Math.abs(self.getVelocity() / 300);
                if (timeline) timeline.timeScale(_increment);
                gsap.set(canvas, {
                    y: 50 * self.progress + 'vh',
                    scale: 1 - 0.1 * self.progress
                });

                // gsap.set(cbubbles, { y: (90 * self.progress) + 'vh', scale: 1 - (0.1 * self.progress) });
                // gsap.set(cbubbles2, { y: (90 * self.progress) + 'vh', scale: 1 - (0.1 * self.progress) });
                // updatebubbles(Math.ceil(self.progress * 239) + 1);
                // updateBubbles2(Math.ceil(self.progress * 239) + 1);
            }
        });
    </script>
    <script>

        new Swiper('.swiper1', {
            speed: 1000,
            spaceBetween: 100,
            slidesPerView: 3,
            parallax: true,
            initialSlide: 1,
            centeredSlides: true,
            loop: true,
            autoplay: {
                delay: 2000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.home .section2 .content .button img:last-child',
                prevEl: '.home .section2 .content .button img:first-child',
            },
            breakpoints: {
                100: {
                    slidesPerView: 1,
                },
                1024: {
                    slidesPerView: 3,
                },
            },
            on: {
                init() {
                    var w = $('.swiper1 .swiper-slide-active .text').width() + (46 * 2)
                    $('.home .section2 .content .block').css('width', w + 'px')
                },
                slideChange() {
                    setTimeout(function () {
                        var w = $('.swiper1 .swiper-slide-active .text').width() + (46 * 2)
                        $('.home .section2 .content .block').css('width', w + 'px')
                    }, 10)
                }
            }
        })
        new Swiper('.swiper3', {
            loop: true,
            slidesPerView: 6,
            spaceBetween: 36,
            speed: 6000,
            allowTouchMove: false,
            autoplay: {
                delay: 0,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },

            breakpoints: {
                100: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                1024: {
                    slidesPerView: 6,
                    spaceBetween: 36,
                },
            },
        })

        const countItems = document.querySelectorAll('.count-item');
        function onIntersection(entries, observer) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const e = entry.target;
                    animateCount(e);
                    observer.unobserve(e);
                }
            });
        }
        const observer = new IntersectionObserver(onIntersection);
        countItems.forEach(item => observer.observe(item));
        function animateCount(e) {
            var demo = { score: 0 },
                scoreDisplay = e,
                to = e.getAttribute('data-to'),
                speed = e.getAttribute('data-speed') * 1,
                separator = e.getAttribute('data-separator'),
                to_fixed = e.getAttribute('data-fixed');

            if (to !== null) {
                if (to.indexOf('.') !== -1) {
                    var automatic = (to.length - 1) - to.indexOf('.')
                }
            }
            if (speed === 0) {
                speed = 1;
            }
            TweenLite.to(demo, speed, {
                score: to,
                onUpdate: showScore
            });
            function showScore() {
                if (separator !== null) {
                    scoreDisplay.innerHTML = formatNumberWithCommasAndDecimal(demo.score, to_fixed, separator);
                } else if (to_fixed !== null) {
                    scoreDisplay.innerHTML = demo.score.toFixed(automatic);
                } else {
                    scoreDisplay.innerHTML = demo.score.toFixed(0);
                }
            }
        }
        function formatNumberWithCommasAndDecimal(number, decimalPlaces, separator) {
            var formattedNumber = number.toFixed(decimalPlaces);
            formattedNumber = formattedNumber.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
            return formattedNumber;
        }
    </script>
</body>

</html>